<template>
  <div>
    <TodoHeader @addTodo="addTodo" />
    <TodoMain :list="showList" @delTodo="delTodo" />
    <TodoFooter :status="status" :lastLength="lastLength" @updateStatus="updateStatus" />
    <button @click="onBack">返回</button>
  </div>
</template>

<script>
// 1导入  
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';

export default {
  // 2注册 局部
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data() {
    return {
      // 数据一般建议放在父组件,同样对数据的操作也是放在这里
      status: 'all', // all active completed
      list: [
        { id: 1, name: '晨练', done: false },
        { id: 2, name: '练书法', done: true }
      ]
    };
  },
  computed: {
    lastLength() {
      return this.list.filter(item =>!item.done).length;
    },
    showList() {
      switch (this.status) {
        case 'all':
          return this.list;
        case 'active':
          return this.list.filter(item =>!item.done);
        case 'completed':
          return this.list.filter(item => item.done);
        default:
          return [];
      }
    }
  },
  methods: {
    addTodo(name) {
      if (name && name.trim()!== '') {
        this.list.push({
          name: name,
          done: false,
          id: ~~(Math.random() * 1000)
        });
      }
    },
    delTodo(id) {
      if (typeof id === 'number' || typeof id ==='string') {
        this.list = this.list.filter(item => item.id!== id);
      }
    },
    updateStatus(status) {
      this.status = status;
    },
    onBack() {
      if (this.$router) {
        this.$router.back();
      } else {
        console.warn('$router is not defined');
      }
    }
  }
};
</script>

<style>
/* 可以在这里添加一些全局样式或者针对当前组件的基础样式 */
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
</style>